import { cloneElement, Component } from 'react';
import Menu from 'uxcore/lib/Menu';
import Tick from 'components/tick';
let Select = require('uxcore-select2');
let Option = Select.Option;

// `ReactRouter`文档请看  https://github.com/ReactTraining/react-router/tree/v2.8.1
import { Router, hashHistory, Link } from 'react-router';

import tmcRoute from '../pages/tmc';
import lineRoute from '../pages/line';
import analyseRoute from '../pages/analyse';
import heatmapRoute from '../pages/heatmap';

import Logo from '../images/logo.svg'

// Define webpack publicPath at runtime
__webpack_public_path__ = ((s) => (
  s[s.length - 1].src.replace(/\/[^\/]+$/, '/')
))(document.getElementsByTagName('script'));

// `ReactRouter`文档请看  https://github.com/ReactTraining/react-router/tree/v2.8.1
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      city: '杭州市'
    };
    this.handlerChange = this.handlerChange.bind(this)
  }

  handlerChange(value) {
    let t = this;
    t.setState({ city: value })
  }

  render() {
    const { props: { children, location, routes }, state: { city }, handlerChange } = this;
    return (
      <div className="app">
        <header>
          <div className="head-left">
            <Logo width={35} />
            <h2>城市公交综合运行基础数据采集展现与分析服务平台</h2>
          </div>
          <div className="head-right">
            <Tick />
            <Select defaultValue="杭州市" style={{ width: 110 }} onSelect={handlerChange} dropdownClassName="kuma-select2-selected-has-icon">
              <Option value="杭州市">杭州市</Option>
              <Option value="嘉兴市">嘉兴市</Option>
              <Option value="绍兴市">绍兴市</Option>
            </Select>
            <span className="quit"><i className="kuma-icon kuma-icon-exit-door"></i>退出系统</span>
          </div>
        </header>
        <Menu mode="horizontal" selectedKeys={[routes[routes.length - 1].title]}>
          <Menu.Item key="tmc">
            <Link to={'/tmc'} >公交拥堵路况图</Link>
          </Menu.Item>
          <Menu.Item key="line">
            <Link to={'/line'} >公交运行线路图</Link>
          </Menu.Item>
          <Menu.Item key="analyse">
            <Link to={`/analyse`} >运力分析统计图</Link>
          </Menu.Item>
          <Menu.Item key="heatmap">
            <Link to={`/heatmap`} >城市公交热力图</Link>
          </Menu.Item>
        </Menu>
        <div className="kuma-container kuma-container-full">
          {cloneElement(children || 'div', {
            key: location.pathname,
            city
          })}
        </div>
      </div>
    )
  }
}

const rootRoute = {
  childRoutes: [{
    path: '/',
    component: App,
    // 这里可以设置首页跳转的地址
    indexRoute: { onEnter: (nextState, replace) => replace('/tmc') },
    childRoutes: [
      // 新建页面时，请注意更新此处的路由
      tmcRoute,
      lineRoute,
      // analyse因为是泛匹配，所以要放到下面
      // 不然会覆盖前面的
      analyseRoute,
      heatmapRoute,
    ],
  }],
};


export default {
  history: hashHistory,
  Routes: (<Router history={hashHistory} routes={rootRoute} />),
};
